<template>
  <div class="create-sku">

    <Heads types="issue_goods"></Heads>

    <div class="goods-container">
      <van-tabs type="card" sticky animated color="yellowgreen">
        <!-- 采集 -->
        <van-tab title="采集商品">
          <div class="collect-sku">
            <!-- 标题 -->
            <van-field
              v-model="collect.title"
              label="标题"
              required
              maxlength="20"
              clearable
              placeholder="请输入吸睛的标题哦"
            />
            <van-divider
              :style="dividerStyle"
            />
            <!-- id -->
            <van-field
              v-model="collect.id"
              label="id"
              required
              clearable
              placeholder="请输入id"
            />
            <van-divider
              :style="dividerStyle"
            />
            <!-- 类型 -->
            <van-field
              readonly
              clickable
              required
              label="商品分类"
              :value="collect.goodsType"
              placeholder="选择类型"
              @click="collect.showPicker = true"
            />
            <van-popup v-model="collect.showPicker" position="top">
              <van-picker
                show-toolbar
                :columns="collect.columns"
                :item-height="30"
                :visible-item-count="3"
                @cancel="collect.showPicker = false"
                @confirm="onConfirm"
                safe-area-inset-bottom
              />
            </van-popup>
            <van-divider
              :style="dividerStyle"
            />
            <!-- 图片地址 -->
            <van-field
              v-model="collect.img"
              label="图片"
              required
              clearable
              placeholder="请输入图片地址"
            />
            <van-divider
              :style="dividerStyle"
            />
            <!-- price -->
            <van-field
              v-model="collect.price"
              label="价格"
              required
              clearable
              placeholder="请输入价格"
            />
            <van-divider
              :style="dividerStyle"
            />

          <!-- <table border="1px solid #000">
            <tr>
              <th>s1</th>
              <th>s2</th>
            </tr>
            <tr>
              <td>s1_1</td>
              <td>s1</td>
              <td>2</td>
              <td>2</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>1</td>
              <td>2</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
          </table> -->
          </div>
        </van-tab>

        <van-tab title="发布商品">
          22
          <!-- <van-cell-group>
            <van-field
              v-model="title"
              label="标题"
              required
              maxlength="20"
              clearable
              placeholder="请输入吸睛的标题哦"
            />
            <van-divider
              :style="dividerStyle"
            />

            <Radios
              cell-title="商品类型"
              radio-one="实物(物流)"
              radio-two="虚拟商品"
              @getradiotype="changeRadioTypeOne"
            ></Radios>
            <van-divider
              :style="dividerStyle"
            />

            <van-field
              readonly
              clickable
              label="商品分类"
              :value="goodsType"
              placeholder="选择类型"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="top">
              <van-picker
                show-toolbar
                :columns="columns"
                :item-height="30"
                :visible-item-count="3"
                @cancel="showPicker = false"
                @confirm="onConfirm"
                safe-area-inset-bottom
              />
            </van-popup>
            <van-divider
              :style="dividerStyle"
            />

            <Uploader
              @getfilelist="changeFileList"
              cell-title="商品大图"
              cell-label="数量限制四张."
              :upload-count="4"
              preview-img-size="40px"
            />
            <van-divider
              :style="dividerStyle"
            />

            <Radios
              cell-title="规格类型"
              radio-one="有"
              radio-two="无"
              @getradiotype="changeRadioTypeTwo"
            ></Radios>
            <van-divider
              :style="dividerStyle"
            />
            <div class="standard-container">
              <div v-if="radioTypeTwo">
                <van-swipe-cell :before-close="beforeClose">
                  <van-collapse v-model="activeNames">
                    <van-collapse-item name="1" title="规格">
                      <div slot="value">向左滑动添加规格项</div>
                      内容
                    </van-collapse-item>
                  </van-collapse>
                  <van-button
                    slot="right"
                    square
                    text="添加"
                    type="primary"
                    class="add-button"
                  />
                </van-swipe-cell>
                <van-swipe-cell :before-close="beforeClose">
                  <van-collapse v-model="activeNames">
                    <van-collapse-item title="属性" name="2">
                      <div slot="value">向左滑动添加规格项</div>
                      内容
                    </van-collapse-item>
                  </van-collapse>
                  <van-button
                    slot="right"
                    square
                    text="添加"
                    type="primary"
                    class="add-button"
                  />
                </van-swipe-cell>
              </div>
              <div v-else>
                <van-field
                  v-model="noSpecInventory"
                  label="总库存(个)"
                  placeholder="请输入内容"
                />
                <van-field
                  v-model="noSpecPrice"
                  label="销售单价(元)"
                  type="number"
                  placeholder="请输入内容(数字格式: 支持小数)"
                />
              </div>
            </div>
          </van-cell-group> -->
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import Vue from 'vue'
import { Collapse, Divider, Popup, Picker, Tabs, Tab, CellGroup, Field, SwipeCell, CollapseItem } from 'vant'
Vue.use(Collapse).use(Divider).use(Popup).use(Picker).use(Tabs).use(Tab).use(CellGroup).use(Field).use(SwipeCell).use(CollapseItem)

export default {
  data () {
    return {
      dividerStyle: {
        borderColor: '#f5f4f0',
        borderWidth: '.04rem',
        margin: '.02rem 0'
      },
      collect: {
        showPicker: false,
        columns: [
          { text: '衣服', type: 'clothes' },
          { text: '家居', type: 'furnishings' },
          { text: '手机', type: 'mobilephone' },
          { text: '电脑', type: 'computers' },
          { text: '食品', type: 'foods' },
          { text: '化妆品', type: 'cosmetics' },
          { text: '虚拟商品', type: 'virtualgoods' }
        ],
        goodsType: ''
      },
      issue: {}
      // title: '',
      // logisticsType: '',
      // goodsType: '',
      // showPicker: false,
      // columns: ['衣服', '家居', '手机', '电脑', '食品', '虚拟商品'],
      // goodsimgList: [], // 上传图片
      // radioTypeOne: 'true', //单选
      // radioTypeTwo: 'true',
      // noSpecInventory: '', // 库存
      // noSpecPrice: '', // 单价
      // activeNames: ['1']
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    // collect
    onConfirm (value) {
      // 确定
      this.collect.goodsType = value.text
      this.collect.en_goodsType = value.type
      this.collect.showPicker = false
    },
    toCollect () {
      const skuData =
      {
        goods_id: this.collect.id,
        goods_type: this.collect.en_goodsType,
        quota: 5,
        quota_used: 0,
        start_sale_num: 1,
        goods_info: {
          title: this.collect.title,
          picture: this.collect.img,
          price: this.collect.price
        },
        sku: {
          price: this.collect.price.toFixed(2),
          stock_num: 227,
          none_sku: false,
          hide_stock: false,
          collection_id: 946755,
          tree: [
            {
              k: '颜色',
              k_id: '1',
              v: [
                {
                  id: 'colorOne',
                  name: '黑色',
                  imgUrl:
                    'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
                },
                {
                  id: 'colorTwo',
                  name: '白色'
                }
              ],
              k_s: 's1',
              count: 2
            },
            {
              k: '尺寸',
              k_id: '2',
              v: [
                {
                  id: 'size28',
                  name: '尺寸28'
                },
                {
                  id: 'size30',
                  name: '尺寸30'
                }
              ],
              k_s: 's2',
              count: 2
            }
          ],
          list: [
            {
              id: 2259,
              price: 100,
              discount: 100,
              code: '',
              s1: 'colorOne',
              s2: 'size28',
              s3: '0',
              s4: '0',
              s5: '0',
              stock_num: 110,
              goods_id: 946755
            },
            {
              id: 2260,
              price: 100,
              discount: 100,
              code: '',
              s1: 'colorOne',
              s2: 'size30',
              s3: '0',
              s4: '0',
              s5: '0',
              stock_num: 0,
              goods_id: 946755
            },
            {
              id: 2257,
              price: 100,
              discount: 100,
              code: '',
              s1: 'colorTwo',
              s2: 'size28',
              s3: '0',
              s4: '0',
              s5: '0',
              stock_num: 111,
              goods_id: 946755
            },
            {
              id: 2258,
              price: 100,
              discount: 100,
              code: '',
              s1: 'colorTwo',
              s2: 'size30',
              s3: '0',
              s4: '0',
              s5: '0',
              stock_num: 6,
              goods_id: 946755
            }
          ],
          messages: [
            {
              datetime: '0',
              disable: false,
              multiple: 1,
              name: '留言',
              type: 'text',
              required: '0'
            }
          ]
        },
        properties: [],
        initialSku: {
          s1: 'colorOne',
          s2: 'size28',
          selectedNum: 1
        }
      }
      skuData.goods_id = this.id
      skuData.goods_info.title = this.name
      skuData.goods_info.picture = this.img
      skuData.goods_info.price = this.price
      skuData.sku.price = this.price / 100
      skuData.sku.stock_num = 0
      skuData.sku.tree[0].v[0].imgUrl = this.img
      let num = 0
      this.tableList.forEach((item, i) => {
        num += item.number * 1
        skuData.sku.list[i].stock_num = item.number
        skuData.sku.list[i].goods_id = this.id
        skuData.sku.list[i].price = this.price
      })
      skuData.sku.stock_num = num
      // console.log(skuData)
      alert(JSON.stringify(this.tableList))
      // console.log(JSON.stringify(skuData))
      alert(JSON.stringify(skuData))
    },

    // issue
    changeFileList (data) {
      // 自定义
      this.goodsimgList = data
      // console.log(this.goodsimgList)
    },
    changeRadioTypeOne (data) {
      this.radioTypeOne = data
    },
    changeRadioTypeTwo (data) {
      this.radioTypeTwo = data
    },
    beforeClose ({ position, instance }) {
      // position 为关闭时点击的位置
      // instance 为对应的 SwipeCell 实例
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          // Dialog.confirm({
          //   message: '确定添加吗？'
          // }).then(() => {
          //   instance.close();
          // });
          // console.log('添加?')
          break
      }
    }
  },
  mounted () {
    this.FOOTERSHOW(false)
  },
  destroyed () {
    this.FOOTERSHOW(true)
  }
}
</script>
